<template>
	<div class="dialog">
		<!-- 添加网络设备 -->
		<el-dialog
			title="添加网络设备"
			:visible="interDiaLogVisble"
			width="30%"
			@open="dialogOpen"
			@close="dialogClose"
			:show-close="false"
		>
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-width="100px"
				class="demo-ruleForm"
			>
				<el-form-item label="ip地址" prop="IP">
					<el-input v-model="ruleForm.IP"></el-input>
				</el-form-item>
				<el-form-item label="一级区域" prop="LevelArea1">
					<el-input v-model="ruleForm.LevelArea1"></el-input>
				</el-form-item>
				<el-form-item label="二级区域" prop="LevelArea2">
					<el-input v-model="ruleForm.LevelArea2"></el-input>
				</el-form-item>

				<el-form-item label="品牌" prop="BRAND">
					<el-select
						v-model="ruleForm.BRAND"
						placeholder="请选择网络设备品牌"
						@change="brandChange"
					>
						<el-option label="思科" value="CISCO"></el-option>
						<el-option label="华为" value="HUAWEI"></el-option>
						<el-option label="其他" value="Other"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="命令提示符" prop="CMD">
					<el-input disabled v-model="ruleForm.CMD"></el-input>
				</el-form-item>
				<el-form-item label="标签" prop="TAG">
					<el-input v-model="ruleForm.TAG"></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogClose">取 消</el-button>
				<el-button type="warning" @click="resetForm('ruleForm')"
					>重置</el-button
				>
				<el-button type="primary" @click="submitForm('ruleForm', 'add')"
					>确 定</el-button
				>
			</span>
		</el-dialog>

		<!-- 编辑网络设备 -->
		<el-dialog
			title="编辑网络设备"
			:visible="interDiaLogVisbleEdit"
			width="30%"
			@open="dialogOpen"
			@close="dialogClose"
			:show-close="false"
		>
			<el-form
				:model="ruleFormEdit"
				:rules="rules"
				ref="ruleFormEdit"
				label-width="100px"
				class="demo-ruleForm"
			>
				<el-form-item label="ip地址" prop="IP">
					<el-input v-model="ruleFormEdit.IP"></el-input>
				</el-form-item>
				<el-form-item label="一级区域" prop="LevelArea1">
					<el-input v-model="ruleFormEdit.LevelArea1"></el-input>
				</el-form-item>
				<el-form-item label="二级区域" prop="LevelArea2">
					<el-input v-model="ruleFormEdit.LevelArea2"></el-input>
				</el-form-item>

				<el-form-item label="品牌" prop="BRAND">
					<el-select
						v-model="ruleFormEdit.BRAND"
						placeholder="请选择网络设备品牌"
						@change="brandChangeEdit"
					>
						<el-option label="思科" value="CISCO"></el-option>
						<el-option label="华为" value="HUAWEI"></el-option>
						<el-option label="其他" value="Other"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="命令提示符" prop="CMD">
					<el-input disabled v-model="ruleFormEdit.CMD"></el-input>
				</el-form-item>
				<el-form-item label="标签" prop="TAG">
					<el-input v-model="ruleFormEdit.TAG"></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogClose">取 消</el-button>
				<el-button
					type="primary"
					@click="submitForm('ruleFormEdit', 'edit')"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import * as api from '@/api/index';

export default {
	props: {
		interDiaLogVisble: Boolean,
		interDiaLogVisbleEdit: Boolean,
		formData: null,
	},
	data() {
		return {
			dialogVisible: true,
			
			ruleForm: {
				IP: '',
				LevelArea1: '',
				LevelArea2: '',
				BRAND: '',
				CMD: '',
				TAG: '',
			},
			ruleFormEdit: '',
			rules: {
				IP: [
					{
						required: true,
						message: '请输入IP',
						trigger: 'blur',
						
					},
					{
					
						pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
						message: '请输入正确的IP',
					}
				],
				LevelArea1: [
					{
						required: true,
						message: '请输入一级区域',
						trigger: 'blur',
					},
				],
				LevelArea2: [
					{
						required: false,
						message: '请输入二级区域',
						trigger: 'blur',
					},
				],
				BRAND: [
					{
						required: true,
						message: '请选择网络设备品牌',
						trigger: 'change',
					},
				],
				TAG: [
					{
						required: true,
						message: '请输入标签',
						trigger: 'blur',
					},
				],
			},
		};
	},
	methods: {
		submitForm(formName, action) {	
			this.$refs[formName].validate((valid) => {
				if (valid) {
					// alert('submit!');
					switch (action) {
						case 'add':
							api.InternetAdd(this.ruleForm)
								.then((result) => {
									this.$message({
										showClose: true,
										message: 'success',
										type: 'success',
									});
									console.log(result);
									this.$emit('interdialogClose');
								})
								.catch((err) => {
									this.$message({
										showClose: true,
										message: err,
										type: 'error',
									});
								});

							break;
						case 'edit':
							api.InternetEdit(this.ruleFormEdit)
								.then((result) => {
									this.$message({
										showClose: true,
										message: 'success',
										type: 'success',
									});
									console.log(result);
									this.$emit('interdialogClose');
								})
								.catch((err) => {
									this.$message({
										showClose: true,
										message: err,
										type: 'error',
									});
								});
							break;
					}
				} else {
					// console.log('error submit!!');
					this.$message.error('请完成表单,再尝试提交');
					return false;
				}
			});
			// this.dialogVisible = false
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		brandChange() {
			this.ruleForm.CMD = this.ruleForm.BRAND;
		},
		brandChangeEdit() {
			this.ruleFormEdit.CMD = this.ruleFormEdit.BRAND;
		},
		dialogClose() {
			if (this.$refs.ruleForm) {
				this.$refs.ruleForm.resetFields();
			}
			if (this.$refs.ruleFormEdit) {
				this.$refs.ruleFormEdit.resetFields();
			}

			this.$emit('interdialogClose');
		},
		// dialogCloseEdit(){

		//     // this.$refs.ruleFormEdit.resetFields();
		//     this.$emit('interdialogClose')
		// },

		dialogOpen() {
			// console.log(this)
			this.ruleFormEdit = this.formData;
		},
	},
};
</script>

<style scoped></style>
